<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Button-demo-primary">默认样式</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Dropdowns 下拉菜单</h1>
        <section class="markdown">
            <p>下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现</p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Button-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation" class="dropdown-header">下拉菜单标题</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">下拉菜单标题</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-primary">默认样式</a></div>
                    <div>
                         <p>可通过向 <code>.dropdown-menu</code> 添加 <code>class .pull-right</code> 来向右对齐下拉菜单。</p>
                         <p>可以使用 <code>class dropdown-header</code> 向下拉菜单的标签区域添加标题。</p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class=&quot;dropdown&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn dropdown-toggle&quot; id=&quot;dropdownMenu1&quot; data-toggle=&quot;dropdown&quot;&gt;下拉菜单
        &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;dropdownMenu1&quot;&gt;
        &lt;li role=&quot;presentation&quot; class=&quot;dropdown-header&quot;&gt;下拉菜单标题&lt;/li&gt;
        &lt;li role=&quot;presentation&quot;&gt;
            &lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Java&lt;/a&gt;
        &lt;/li&gt;
        &lt;li role=&quot;presentation&quot;&gt;
            &lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;数据挖掘&lt;/a&gt;
        &lt;/li&gt;
        &lt;li role=&quot;presentation&quot;&gt;
            &lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;数据通信/网络&lt;/a&gt;
        &lt;/li&gt;
        &lt;li role=&quot;presentation&quot; class=&quot;divider&quot;&gt;&lt;/li&gt;
        &lt;li role=&quot;presentation&quot; class=&quot;dropdown-header&quot;&gt;下拉菜单标题&lt;/li&gt;
        &lt;li role=&quot;presentation&quot;&gt;
            &lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;分离的链接&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
    </div>
</article>